<template>
  <a-layout id="components-layout">
    <!-- 头部 -->
    <a-layout-header class="header">
      <div class="logo">
        <img :src="require('@/assets/jxlogo.png')" height="32">
        <h1>Vis Docs</h1>
      </div>
      <a-menu
          theme="light"
          mode="horizontal"
          :selectedKeys="[curMenu]"
          :style="{ lineHeight: '64px' }"
          @click="menuClick"
      >
        <a-menu-item v-for="item in this.$router.options.routes" :key="item.path">
          {{item.name}}
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <!-- {{curMenu}} -->
    <!-- {{this.$route.path}} -->
    <!-- {{this.$store.state.curMenu}} -->
    <a-layout>
      <!-- 左菜单 -->
      <a-layout-sider width="300" class="sidebar" v-if="this.$route.path !== '/layout'">
        <a-menu
            :selectedKeys="[this.$route.path]"
            mode="inline"
            :style="{ height: '100%',}"
            @click="leftMenuClick"
        >
          <a-menu-item v-for="item in leftMenu" :key="item.path" v-if="item.meta.hidden != true">
            {{item.name}}
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <!-- 内容 -->
      <a-layout>
        <a-layout-content>
          <router-view class="main-container" />
          <a-layout-footer id="footer">
            <a-row class="footerList" :gutter="30">
              <a-col :span="24">
                <div class="footerTitle">快速入口</div>
                <ul>
                  <li><a href="http://192.168.4.113:83/jxbp-docs/" target="_blank">Jxbp UI组件网站</a></li>
                  <li><a href="http://192.168.4.113:83/vis-docs/" target="_blank">Jx可视化组件网站</a></li>
                  <li><a href="http://192.168.4.96:8181/" target="_blank">开发文档地址</a></li>
                </ul>
              </a-col>
            </a-row>
            <div>Copyright © 2023 Jxbd All rights reserved.</div>
          </a-layout-footer>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      curPath: '',
      curMenu: localStorage.getItem('curMenu'),
    };
  },
  mounted() {
    if(localStorage.curMenu == undefined) {
      this.curMenu = '/'
    }
  },
  computed: {
    leftMenu() {
      var routes = this.$router.options.routes;
      console.log('routes',routes)
      var route = this.$route.matched;
      let matchedRoute = null
      for(var i=0; i < route.length; i++){
        matchedRoute = routes.find((e) => (e.name == route[i].name));
        if(matchedRoute) break;
      }
      if(matchedRoute && matchedRoute.children){
        return matchedRoute.children
      }
      return []
    }
  },
  methods: {
    leftMenuClick({ item, key, keyPath }) {
      this.$router.push({
        path: key
      })
    },
    menuClick({ item, key, keyPath }) {
      this.curMenu = key
      this.$store.commit('getMenuData', key)
      this.$router.push({
        path: key
      })
    },
  }
};
</script>

<style lang="less">
#components-layout{
  height: 100%;

  .header{
    background: #232934;
    box-shadow: 0 2px 8px #161923;
    position: relative;
    z-index: 10;
    padding: 0 40px;

    .ant-menu{
      background: #232934;
      //height: 64px;
      color: #fff;
    }
  }

  .logo {
    width: 200px;
    height: 100%;
    color: #fff;
    float: left;
    display: flex;
    align-content: center;
    align-items: center;

    img{
      margin-right: 16px;
    }

    h1{
      margin: 0;
      font-size: 18px;
      color: #fff;
    }

  }

  .main-container{
    padding: 40px 40px 144px 40px;
    min-height: 500px;
    overflow: hidden;
    background: #111111;
    color: #fff;
  }

  .ant-menu.ant-menu-horizontal{
    border-bottom: none;
  }
}

.sidebar{
  overflow-y: auto;
  border-right: 1px solid #111111;

  .ant-menu{
    background: #20222c;
    color: #fff;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
    background: #191c24;
  }

  .ant-menu-item:active, .ant-menu-submenu-title:active{
    background: #191c24;
  }

  &.ant-layout-sider{
    background: #1d1c26;
  }

  .ant-menu-inline{
    border-right: none;
  }
}

@media (min-width: 719px) {
  .sidebar {
    overflow: hidden;
  }

  .sidebar:hover {
    overflow-y: auto;
  }
}

#footer {
  clear: both;
  font-size: 14px;
  background-color: #000;
  position: relative;
  z-index: 100;
  color: hsla(0,0%,100%,.65);
  text-align: right;

  a{
    color: #fff;
  }
}

.footerList{
  padding-bottom: 20px;
  text-align: left;

  .footerTitle{
    border-bottom: 1px solid #fff;
    font-size: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    color: #fff;
  }

  ul {
      list-style: none;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      column-gap: 60px;
      row-gap: 16px;
      font-size: 12px;
  }
}
</style>